<template>
	<view class="wcGroup p30">
		<view class="wcGroup card p30" v-if="vestList">
			<view class="title">{{ vestList?.title }}</view>
			<view class="img">
				<image :src="vestList?.imageUrl" mode="aspectFill"></image>
			</view>
			<view class="delBut" @click="clickFun">删除</view>
		</view>
		<view class="noData" v-else>暂无数据</view>
		<view class="addVest dis" @click="open"><up-icon name="plus" color="#fff" size="30rpx"></up-icon></view>
	</view>
	<up-modal content="确定要删除吗？" title="" :show="showModal" contentTextAlign="center" confirmButtonShape="circle">
		<template #confirmButton>
			<view class="modalBut dis">
				<view class="custom_btn nodeBut" @click="noDel">取消</view>
				<view class="custom_btn" @click="okDel">确定</view>
			</view>
		</template>
	</up-modal>
	<up-popup :show="showPop" mode="bottom" :round="10" @close="close" @open="open">
		<view class="add">
			<view class="addItem dis">
				<view class="addLable">
					<text>*</text>
					万人墙图片
				</view>
				<view class="addVale">
					<view class="imgDom dis" @click="uploadImg">
						<image v-if="vestImg" :src="vestImg" mode="aspectFill"></image>
						<image v-else class="imgIcon" src="/pages/static/11.png" mode=""></image>
						<view v-if="vestImg" class="offImg" @click.stop="delImg">x</view>
					</view>
				</view>
			</view>
			<view class="addItem dis">
				<view class="addLable">
					<text>*</text>
					万人墙标题
				</view>
				<view class="addVale">
					<input v-model="vestName" type="text" placeholder-style="color: #cacaca;" placeholder="请填写万人墙标题" />
				</view>
			</view>
			<view class="addBut" @click="addSave">提交</view>
		</view>
	</up-popup>
</template>

<script setup>
import { getSchoolPeopleWall, deletePeopleWall, addPeopleWallDialog } from '@/config/api.js';
import { uploadImage } from '@/util/util.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const schoolId = ref(0);
onLoad((options) => {
	// console.log('options', options);
	schoolId.value = options.schoolId;
	userVestFun();
});
onShow(() => {});

// 新增
const vestImg = ref('');
const vestName = ref('');
const showPop = ref(false);
const close = () => {
	showPop.value = false;
};
const open = () => {
	showPop.value = true;
};
const uploadImg = async () => {
	if (!!vestImg.value) return;
	const res = await uploadImage();
	if (res.code == 0) {
		vestImg.value = res.data.imgUrl;
	}
};
const delImg = (item) => {
	vestImg.value = '';
};
const addSave = async () => {
	if (!vestName.value) {
		uni.showToast({
			title: '请输入标题',
			icon: 'none'
		});
	}
	if (!vestImg.value) {
		uni.showToast({
			title: '请选择图片',
			icon: 'none'
		});
	}
	const data = {
		title: vestName.value,
		imageUrl: vestImg.value
	};
	const res = await addPeopleWallDialog(schoolId.value, data);
	if (res.code == 0) {
		uni.showToast({
			title: '新增成功',
			icon: 'none'
		});
		close();
		userVestFun();
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};

const vestList = ref({});
const userVestFun = async () => {
	const res = await getSchoolPeopleWall(schoolId.value);
	console.log(res);
	if (res.code == 0) {
		vestList.value = res.data.schoolPeopleWall;
	}
};
// 删除马甲
const showModal = ref(false);
const noDel = () => {};
const okDel = async () => {
	const res = await deletePeopleWall(vestList.value.id, {});
	if (res.code == 0) {
		userVestFun();
		showModal.value = false;
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};
const clickFun = async () => {
	showModal.value = true;
	// uni.showModal({
	// 	title: '提示',
	// 	content: '确定删除',
	// 	success: async(res) =>{
	// 		if (res.confirm) {
	// 			await deleteWechatGroup(vestList.value.id, {});
	// 			userVestFun();
	// 		} else if (res.cancel) {
	// 			console.log('用户点击取消');
	// 		}
	// 	}
	// });
};
</script>

<style lang="scss" scoped>
.wcGroup {
	width: 100%;
	.wcGroup {
		width: 100%;
		.title {
			width: 100%;
			line-height: 100rpx;
			font-weight: 700;
			text-align: center;
		}
		.img {
			width: 100%;
			height: 675rpx;
			border-radius: 15rpx;
			overflow: hidden;
			background-color: #f7f7f7;
		}
		.delBut {
			margin: 0 auto;
			margin-top: 30rpx;
			width: 80%;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			text-align: center;
			color: #fff;
			background-color: #e74133;
		}
	}
	.addVest {
		position: fixed;
		bottom: 50rpx;
		right: 30rpx;
		justify-content: center;
		align-items: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #01b3f8;
	}
}
.add {
	margin-top: 30rpx;
	padding: 0 30rpx;
	padding-bottom: 30rpx;
	.addItem {
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #ededed;
		.addLable {
			margin-right: 30rpx;
			color: #676566;
			font-size: 26rpx;
			text {
				color: #e74133;
			}
		}
		.addVale {
			.imgDom {
				position: relative;
				justify-content: center;
				align-items: center;
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
				background-color: #f7f8fa;
				.imgIcon {
					width: 70rpx;
					height: 70rpx;
				}
				.offImg {
					position: absolute;
					right: 0;
					top: 0;
					width: 40rpx;
					height: 40rpx;
					line-height: 30rpx;
					font-size: 26rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 40rpx;
					background: #000;
					color: #fff;
				}
			}
			input {
				font-size: 26rpx;
			}
		}
	}
	.addBut {
		margin: 0 auto;
		margin-top: 40rpx;
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #1c9aee;
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
}
.custom_btn {
	width: 40%;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 35rpx;
	text-align: center;
	color: #fff;
	background-color: #3391e6;
}
.nodeBut {
	color: #515151;
	background-color: #f0f0f0;
}

.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	width: 100%;
	color: #999;
	text-align: center;
}
</style>
